<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="40%"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="form.nickName" />
      </el-form-item>

      <el-form-item label="头像" prop="avatarUrl">
        <el-input v-model="form.avatarUrl" />
        <el-image
          v-if="form.avatarUrl"
          style="width: 100px; height: 100px"
          :src="form.avatarUrl"
          fit="cover"
        />
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-select v-model="form.gender" placeholder="请选择性别">
          <el-option label="未知" :value="0" />
          <el-option label="男" :value="1" />
          <el-option label="女" :value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="form.phoneNumber" />
      </el-form-item>

      <el-form-item label="OpenID" prop="openId">
        <el-input v-model="form.openId" disabled />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handlerConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, defineProps, watch, computed } from "vue";
import { createUser, updateUser } from "@/api/user";
import { ElMessage } from "element-plus";

const formRef = ref("");
const form = ref({
  nickName: "",
  avatarUrl: "",
  gender: 0,
  phoneNumber: "",
  openId: "",
});

const props = defineProps({
  dialogTitle: {
    type: String,
    default: "",
    required: true,
  },
  dialogTableValue: {
    type: Object,
    default: () => ({}),
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
});

const dialogVisible = computed(() => props.modelValue);

watch(
  () => props.dialogTableValue,
  () => {
    form.value = { ...props.dialogTableValue };
  },
  { deep: true, immediate: true }
);

const rules = ref({
  nickName: [
    {
      required: true,
      message: "请输入昵称",
      trigger: "change",
    },
  ],
  phoneNumber: [
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: ["blur", "change"],
    },
  ],
});

const emits = defineEmits(["update:modelValue", "initGetList"]);

const handleClose = () => {
  emits("update:modelValue", false);
};

const handlerConfirm = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    // 表单验证通过
    try {
      if (props.dialogTitle === "添加用户") {
        await createUser(form.value);
      } else {
        await updateUser(form.value);
      }
      ElMessage({
        message: "操作成功",
        type: "success",
      });
      emits("initGetList");
      handleClose();
    } catch (error) {
      ElMessage.error(error.message || "操作失败");
    }
  } catch (validationError) {
    // 表单验证失败
    console.error("表单验证失败:", validationError);
    return;
  }
};
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
